<template>
    <div>
        <h1>首页</h1>
        <a href="/Add">添加</a>
        <br>
        会员名称: <input type="text" v-model="finds.name">
        年龄: <input type="text" v-model="finds.minage"> 
        到  <input type="text" v-model="finds.maxage">
        生日: <input type="date" v-model="finds.stime"> -
        <input type="date" v-model="finds.etime">
        会员等级: 
        <select v-model="finds.memlevid">
                            <option value=0>请选择</option>
                            <option v-for="d in find" :value="d.Id">{{ d.LevelTitle }}</option>
                        </select>
        会员状态: 
        <select v-model="finds.state">
            <option :value=null>请选择</option>
            <option :value=true>启用</option>
            <option :value=false>停用</option>
        </select>
        <input type="button" value="查询" @click="Lshows">
        <input type="button" value="清空" @click="qkshow">
       
       

        <table class="table">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" v-model="qksho" @change="qx">
                    </th>
                    <th>会员编号</th>
                    <th>会员姓名</th>
                    <th>会员密码</th>
                    <th>性别</th>
                    <th>生日</th>
                    <th>手机号</th>
                    <th>年龄</th>
                    <th>创建时间</th>
                    <th>状态</th>
                    <th>会员等级</th>
                    <th>图片</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-for="d in data">
                <tr>
                    <td>
                        <input type="checkbox" v-model="redids" :value="d.Id">
                    </td>
                    <td>{{ d.Id }}</td>
                    <td>{{ d.Name }}</td>
                    <td>******</td>
                    <td>{{ d.Sex==1?"男":"女" }}</td>
                    <td>{{moment(d.Birthday).format('YYYY-MM-DD') }}</td>
                    <td>{{ d.PhoneNumber }}</td>
                    <td>{{ d.Age }}</td>
                    <td>{{moment(d.CreateDate).format('YYYY-MM-DD HH:mm:ss') }}</td>
                    <td>{{ d.State==true?"启用":"停用" }}</td>
                    <td>{{ d.LevelTitle }}</td>
                    <td>
                        <img :src="'https://localhost:7289/'+d.Img" style="width: 100px;height: 100px;" >
                    </td>
                    <td>
                        <input type="button" value="删除" @click="delget(d.Id)">
                        <input type="button" :value="d.State==true?'停用':'启用'" @click="Upyzt(d.Id)">
                        <input type="button" value="编辑" @click="upt(d.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            一共{{ fysy.totalnum }}条,分为{{ fysy.totalpage }}页,
            每页{{ finds.pagesize }}条,当前为{{ finds.pageindex }}页
        </span>
        <input type="button" value="首页" @click="FY(1)">
        <input type="button" value="上一页" @click="FY(finds.pageindex-1)">
        <input type="button" v-for="d in fysy.totalpage" :value="d" @click="FY(d)">
        <input type="button" value="下一页" @click="FY(finds.pageindex+1)">
        <input type="button" value="尾页" @click="FY(fysy.totalpage)">
        每页显示
        <select v-model="finds.pagesize" @click="Lshows">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        跳转: <input type="text" v-model="finds.pageindex">页
        <input type="button" value="前往" @click="listshow">
        <hr>
        <input type="button" value="批量删除" @click="delsc"><br>
        <input type="button" value="批量逻辑删除" @click="dels">
    </div>

</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter } from 'vue-router';

//添加
const data=ref([{
    "Id": 0,
  "Name": "",
  "Password": "",
  "Sex": 1,
  "Birthday": "2025-04-05T10:08:19.191Z",
  "PhoneNumber": "",
  "Age": 0,
  "IsDelete": true,
  "CreateDate": "2025-04-05T10:08:19.191Z",
  "State": true,
  "MemberLevelId": 0,
  "Img": "string",
  "LevelTitle": ""
}])

//下拉框
const find=ref([{
        "Id": 0,
    "LevelTitle": ""
}])

//查询使用
const finds=ref({
    name:"",
    minage:0,
    maxage:0,
    stime:null,
    etime:null,
    memlevid:0,
    state:null,
    pageindex:1,
    pagesize:2
})

//翻页使用
const fysy=ref({
    totalnum:0,
    totalpage:0
})

//全选
const qksho=ref(false);
const redids=ref([]);

//钩子
onMounted(() => {
    listshow();
    Shows();
})

//全选
const qx=()=>{
    if(qksho.value){
       data.value.forEach(a=>{
        redids.value.push(a.Id);
       })
    }else{
        redids.value=[];
    }

}


//显示
const listshow=()=>
{
    axios.get("https://localhost:7289/api/Mem/GetMem",{params:finds.value}).then(
        res=>{
            data.value=res.data.list;
           fysy.value.totalnum=res.data.totalnum;
           fysy.value.totalpage=Math.ceil(fysy.value.totalnum/finds.value.pagesize);
        }
    )
}

//翻页
const FY=(vid:any)=>{
    if(vid>=1 && vid<=fysy.value.totalpage){
        finds.value.pageindex=vid;
        listshow();
    }
}

//下拉框
const Shows=()=>{
    axios.get("https://localhost:7289/api/Mem/xlkmemlev").then(
        res=>{
            find.value=res.data;
        }
    )
}

//查询
const Lshows=()=>{
    finds.value.pageindex=1;
    listshow();
}

//清空
const qkshow=()=>{
   finds.value.name="";
   finds.value.minage=0;
   finds.value.maxage=0;
   finds.value.stime=null;
   finds.value.etime=null;
   finds.value.memlevid=0;
   finds.value.state=null;

   finds.value.pageindex=1;
   listshow();
}


//批量逻辑删除
const dels=()=>
{
    if(confirm("确定要删除吗?")){
    axios.get("https://localhost:7289/api/Mem/DelLjMem",{params:{id:redids.value.toString()}}).then(
        res=>{
            if(res.data>0){
                alert("删除成功");
                qksho.value=false;
                Lshows();
            }else{
                alert("删除失败");
            }
        }
    )
}
}

//批量删除
const delsc=()=>
{
    if(confirm("确定要删除吗?")){
    axios.get("https://localhost:7289/api/Mem/DelMem",{params:{id:redids.value.toString()}}).then(
        res=>{
            if(res.data>0){
                alert("删除成功");
                qksho.value=false;
                Lshows();
            }else{
                alert("删除失败");
            }
        }
    )
}
}

//单个删除
const delget=(vid:any)=>
{
    if(confirm("确定要删除吗?")){
    axios.get("https://localhost:7289/api/Mem/MemDelete",{params:{id:vid}}).then(
        res=>{
            if(res.data>0){
                alert("删除成功");
                listshow();
            }else{
                alert("删除失败");
            }
        }
    )
    }
}


//状态修改
const Upyzt=(vid:any)=>
{
    axios.get("https://localhost:7289/api/Mem/Updatestate",{params:{id:vid}}).then(
        res=>{
            if(res.data>0){
                alert("修改成功");
                listshow();
            }else{
                alert("修改失败");
            }
        }
    )
}


const rout=useRouter();

//修改
const upt=(vid:any)=>{
    rout.push({path:"/Upt",query:{ID:vid}})
}





</script>

<style scoped>

</style>
